<template>
	
	<view class="page box-sizing">
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back'>
				<text class='icon tn-icon-left' @click="goBack"></text>
				<text class='icon tn-icon-home-capsule-fill' @click="gohome"></text>
			</view>
		</tn-nav-bar>
		<view class="after-dom" :style="{ background: configInfo.web_site_color,marginTop: vuex_custom_bar_height + 'px' }" > 
			
		
		</view>

<!--    改了-->
		<view class="title zIndex10">
			<view class="after" :style="{ background: configInfo.web_site_color }"></view>
			<view class="text">注册</view>
		</view>
		<view class="input-group-block zIndex10">
			<view class="input-item">
				<input class="input-dom" type="text" maxlength="11" v-model="nickname" placeholder="请输入昵称" />
			</view>
			<view class="input-item">
				<input class="input-dom" type="text" maxlength="11" v-model="phone" placeholder="请输入手机号" />
			</view>
			<!-- 性别 -->
			  <view class="input-item">
			    <select v-model="gender" class="input-dom">
			      <option value="" disabled>请选择性别</option>
			      <option value="1">男</option>
			      <option value="0">女</option>
			    </select>
			  </view>
			<!-- 日期选择器 -->
			<view class="input-item">
			  <picker mode="date" :value="birthdate" @change="onDateChange">
			    <view class="picker">
			      <!-- 如果 selectedDate 为空，显示 "请选择出生日期" -->
			      <text v-if="!birthdate">请选择出生日期</text>
			      <!-- 如果 selectedDate 有值，显示选中的日期 -->
			      <text v-else>{{ birthdate }}</text>
			    </view>
			  </picker>
			</view>

				

			
		</view>


		<button
			class="btn-dom flex-center border-radius clear-btn-style zIndex10"
			:class="[isAllAngle ? 'border-radius-style-all-arg' : 'border-radius-style-half-arg']"
			:style="{ background: configInfo.web_site_color }"
			@click="telLoginFn"
		>
			注册
		</button>
		

	
		<view class="reg-block" >
			
			
			<tn-checkbox-group  @change="checkboxGroupChange">
			  <tn-checkbox  name="同意" >同意</tn-checkbox>
			</tn-checkbox-group>
			
			
			
			
			
			<view class="description-text" @click="navigateToFn({ url: `/homePages/about?id=27` })">			
				<view class="text" :style="{ color: configInfo.web_site_color }">用户注册协议</view>
			</view>
			<view class="description-text" style="margin-left: 15px;" @click="navigateToFn({ url: `/homePages/about?id=31` })">			
				<view class="text" :style="{ color: configInfo.web_site_color }">隐私保护政策</view>
			</view>
		</view>
	
	</view>
	
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import { assertObject, assertString } from '@/tools/tools.js';
import { host } from '@/tools/siteinfo.js';
let timer;
	export default {
		name: 'TemplateDetails',
		mixins: [template_page_mixin]
		,
	data() {
		return {
			fruit:'',
			is_geree:'',
			phone: '',// 双向绑定 手机号
			nickname: '',// 昵称
			gender: '',  // 性别
			//选择的日期
			birthdate: '',
		};
	},
	onLoad(options) {
		let that = this;		
	},
	onUnload() {
		clearInterval(timer);
	},
	methods: {
		// 日期选择器改变时触发
		onDateChange(event) {
		  this.birthdate = event.detail.value;
		  console.log('选择的日期：', this.birthdate);  // 打印出正确的日期
		},
		
		
		checkboxGroupChange(event) {
		  this.fruit = event		  
		},
		
		
		toPage(page){
			console.log(page);
		  	uni.hideKeyboard()
		  	uni.navigateTo({
		  	url: "/pages/register/register/register"
		  	});
		},
		  
		text1(){
			let that=this
			// 先退出登录一下
			that.logOutFn();
			let token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1aWQiOjF9.VQtQaEk7rvMOGHV5dBlNjWpWtBL-gFNpKBMNXTX3_ns';
			that.$store.commit('setToken', token);
			uni.setStorageSync('token', token);			
			uni.hideLoading();
			uni.showLoading({});
			that.hasTokenGetUserInfo(() => {
				uni.hideLoading();
				uni.showToast({
					icon: 'success',
					title: '登录成功'
				});
				setTimeout(() => {
					that.toBackFn();
				}, 500);
			});	
		},

		
// 'success'：成功图标，通常用来表示操作成功。
// 'loading'：加载图标，通常用来表示正在进行某项操作。
// 'none'：无图标，只有文本显示，通常用于显示简单提示信息。
// 'error'：错误图标，通常用来表示操作失败。
			

		async telLoginFn() {
			let that = this;
			
			if (that.fruit[0]!="同意") {
				uni.showToast({
					icon: 'none',
					title: '请先同意协议和政策'
				});
				return false;
			}
			
			
// 在这里加入表单验证，确保用户填写了必要的字段
		      if (!this.nickname || !this.phone || !this.gender || !this.birthdate) {
		        
		       uni.showToast({
		       	icon: 'error',
		       	title: '请填写完整信息'
		       });
		       return false;
		      }
			
			// 创建请求参数对象
			    const requestData = {
			      nickname: this.nickname,
			      phone: this.phone,
			      gender: this.gender,
			      birthdate: this.birthdate,
			      // agreement: that.fruit[0], // 是否同意协议
			    };
				
	
			
			    // 发送请求（假设你使用 uni.request 发送请求）
				uni.request({
					url:"http://localhost:8182/app/user/register",
					method:"POST",
					data: requestData,
					header: {
						"Content-Type": "application/json" //请求头信息
					},
					success: (res) => { //如果访问接口成功就会进入success
						if(res.data.code == 200){
							uni.showToast({
								icon: 'success',
								title: res.data.errorMessage
							});
							// uni.reLaunch({ url: '/pages/login/login' });
							// 设置延迟，等待提示框完成后再跳转
							        setTimeout(() => {
							            uni.reLaunch({ url: '/pages/login/login' });
							        }, 2000);  // 跳转延迟与 Toast 显示时间一致
						}else{
							uni.showToast({
								icon: 'error',
								title: res.data.errorMessage
							});
						}
										
					},
					fail:()=>{ //如果访问接口失败就会进入fail
						uni.showToast({title: '注册失败',icon:"error"});
						}
					})
				
				
			    
			
			
			
			

		},
		
		
	},
	
};
</script>

<style lang="scss" scoped>
	.no-account {
	  text-align: right; /* 将内容居右 */
	}
	.line {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 5%;
		}
	 
		.item1 {
			display: flex;
			height: 80rpx;
			width: 85%;
			border: 2px solid rgb(144, 200, 226);
		}
	 
		.left {
			width: 30%;
			font-size: 16px;
			display: flex;
			align-items: center;
			padding-left: 2%;
		}
	 
		.right {
			font-size: 15px;
			color: rgb(83, 83, 83);
			width: 70%;
			/* border:1px solid black; */
			text-align: right;
			/* font-size: 18px; */
			padding-right: 2%;
		}
	 
		.right text {
			font-size: 18px;
			margin-left: 2%;
		}
	 
		.right input {
			width: 100%;
			/* border:1px solid black; */
		}
	 
		.picker {
			width: 100%;
			text-align: right;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	


.page {
	display: block;
	    position: relative;
	    width: 100%;
	    height: 100vh;
	   background: url('/static/yjback.jpg') no-repeat center center;
	     /* 临时添加明显颜色测试容器是否渲染 */
	     border: 2px solid red;
	    background-size: cover;
	    overflow: hidden;
	.after-dom {
		content: '';
		display: block;
		position: absolute;
		z-index: 5;
		bottom: -520rpx;
		left: 146rpx;
		width: 1200rpx;
		height: 1200rpx;
		border-radius: 100000rpx;
		opacity: 0.2;
	}
	.title {
		position: relative;
		margin-top: 84rpx;
		.text {
			position: relative;
			z-index: 10;
			padding-left: 112rpx;
			font-size: 60rpx;
			font-weight: bold;
			color: #000000;
			line-height: 66rpx;
		}
		.after {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 246rpx;
			height: 16rpx;
		}
	}
	
	
	
	.input-group-block {
		margin-top: 126rpx;
		padding: 0 110rpx;
		.input-item {
			display: flex;
			padding-top: 46rpx;
			padding-left: 0.2em;
			border-bottom: 1px solid #c2c2c2;
			.input-dom {
				flex: 1;
				font-size: 28rpx;
				height: 70rpx;
				padding-left: 0.2em;
				padding-right: 1em;
			}
			.text {
				font-size: 30rpx;
				color: #2c2c2c;
			}
		}
	}
	.btn-dom {
		margin: 66rpx 56rpx;
		text-align: center !important;
		height: 113rpx;
		line-height: 113rpx !important;
		color: #ffffff;
		border-radius: 1000px !important;
	}
	.zIndex10 {
		position: relative;
		z-index: 10;
	}
	.reg-block {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		z-index: 10;
		bottom: 100rpx;
		width: 100vw;
		.description-text {
			font-size: 26rpx;
			color: #686a68;
			.text {
				display: inline-block;
				text-decoration: underline;
			}
		}
	}
}
</style>
